<template>
  <div class="loading-modal" v-if="loading">
    <el-progress
      :style="{
        width: '20%',
        margin: '0 auto',
        marginTop: `${fatherHeight * 0.3}px`
      }"
      :type="type"
      :width="70"
      :text-inside="true"
      :stroke-width="type ? undefined : strokeWidth"
      :percentage="percentage"
      :color="colors"
      :show-text="showText"
      :status="percentage === 100 ? undefined : 'success'"
    ></el-progress>
    <div class="text">
      {{ text }}
    </div>
  </div>
</template>
<script>
export default {
  name: 'LoadingProgress',
  data() {
    return {
      timeStart: 0,
      fatherHeight: 0, // 父级元素高度
      colors: [
        { color: '#8d75ff', percentage: 99 },
        { color: '#8d75ff', percentage: 100 }
      ]
      // progressLoading: false
    };
  },
  props: {
    progressLoading: {
      type: Boolean,
      default: false
    },
    strokeWidth: {
      type: Number,
      default: 24
    },
    percentage: {
      type: Number,
      default: 0.0
    },
    showText: {
      type: Boolean,
      default: false
    },
    // 进度条状态
    type: {
      type: String,
      default: 'line'
    },
    text: {
      type: String,
      default: '正在加载中...'
    },
    // 显示状态
    loading: {
      type: Boolean,
      default: false
    }
  },
  mounted() {},
  computed: {},
  methods: {}
};
</script>
<style lang="scss" scoped>
.loading-modal {
  height: 100vh;
  width: 100vw;
  background: rgba(0, 0, 0, 0.7);
  text-align: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  .text {
    font-size: 16px;
    color: #fff;
    margin-top: 24px;
  }
}
</style>
